<style  scoped>
.imgsign {
  cursor: pointer;
  width: 80%;
}
.imgborder {
  width: 240px;
  border: 1px dashed #dcdee2;
  height: 200px;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}
.imgchose {
  height: 200px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
}
.imgdelete {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>

<template>
  <div>
    <Card class="margin-bottom-10">
      <Row ref="card" :gutter="16">
        <Col span="6">
          <Input size="large" v-model="str" placeholder="图片描述名称" />
        </Col>
        <Col span="14">
          <Button
            size="large"
            type="primary"
            icon="ios-search"
            v-on:click="
              pPage = 1;
              SearchPhoto();
            "
            >查询</Button
          >
        </Col>
      </Row>
    </Card>
    <div ref="table" :style="divHeight">
      <viewer :images="tableData">
        <Row :gutter="16" style="margin-top: 10px">
          <Col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :key="item.Gid"
            v-for="item in tableData"
          >
            <div class="imgborder">
              <Icon
                type="md-close-circle"
                color="#ed4014"
                :size="30"
                class="imgdelete"
                @click="DeletePhoto(item.Gid)"
              />
              <img class="imgchose" :src="item.Url" />
            </div>
          </Col>
        </Row>
      </viewer>
    </div>
    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50, 100, 300, 500, 1000, 2000, 5000]"
        @on-change="
          (s) => {
            pPage = s;
            SearchPhoto();
          }
        "
        @on-page-size-change="
          (p) => {
            pSize = p;
            pPage = 1;
            SearchPhoto();
          }
        "
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>
<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer/src/component.vue";
import dayjs from "dayjs";
import excel from "@/libs/excel";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import { SearchPhoto, DeletePhoto, AddPhoto } from "@/api/work";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "photodetail",
  data() {
    return {
      modalWord: false,
      loading: false,
      loading2: false,
      divHeight: {
        height: "200px",
      },
      tableHeight: 450,
      uploading: false,
      areaList: [],

      tableTitle: [
        { title: "序号", key: "R_INDEX", width: 80, align: "center" },

        {
          title: "图片库名称",
          key: "Name",
          align: "center",
          minWidth: 300,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  style: {
                    fontSize: "16px",
                    textAlign: "left",
                    color: "#515a6e",
                    float: "left",
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "photodetail",
                        params: {
                          id: params.row.Gid,
                          name: params.row.Name,
                        },
                      });
                    },
                  },
                },
                params.row.Name
              ),
            ]);
          },
        },
      ],
      tableData: [],
      total: 0,
      pPage: 1,
      pSize: 50,
      str: "",
      areaid: "",
      AreaList: [],
      wordTemp: {
        Name: "",
      },

      ruleValidate: {
        Name: [
          {
            required: true,
            message: "不能为空",
          },
        ],
      },
    };
  },
  components: {
    Viewer,
  },
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  computed: {},
  methods: {
    clearWord() {
      this.wordTemp = {
        Name: "",
      };
    },
    SearchPhoto() {
      let vm = this;
      vm.loading = true;
      var reqData = {
        str: vm.str,
        gid: vm.id,
        page: vm.pPage,
        size: vm.pSize,
      };
      SearchPhoto(reqData).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          Message.error(data.Message);
        }
        vm.loading = false;
      });
    },
    AddPhoto() {
      let vm = this;
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          vm.loading2 = true;
          AddPhoto(vm.wordTemp).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              vm.modalWord = false;
              this.SearchPhoto();
              this.$Message.success({ title: "提示", content: "保存成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
            vm.loading2 = false;
          });
        }
      });
    },
    DeletePhoto(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此图片吗？",
        onOk: () => {
          DeletePhoto(id).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchPhoto();
              this.$Message.success("删除成功");
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {},
      });
    },
  },
  created() {},
  mounted() {
    let vm = this;
    debugger;
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 260;

    this.divHeight.height = this.tableHeight + "px";
    this.SearchPhoto();
  },
};
</script>
